<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>key的原理</title>
    <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--
        面试题：react、vue 中的 key 有什么作用？（key 的内部原理）
            1. 虚拟 DOM 中 key 的作用：
                key 是虚拟 DOM 对象的标识，当数据发生变化时，Vue 会根据【新数据】生成【新的虚拟 DOM】,
                随后 Vue 进行【新虚拟 DOM】与【旧虚拟 DOM】的差异比较，比较规则如下：

            2.对比规则：
                (1).旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：
                    1.若虚拟 DOM 中内容没变, 直接使用之前的真实 DOM！
                    2.若虚拟 DOM 中内容变了, 则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM。
                (2).旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key
                    创建新的真实 DOM，随后渲染到到页面。

            3. 用 index 作为 key 可能会引发的问题：
                1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
                    会产生没有必要的真实 DOM 更新 ==> 界面效果没问题, 但效率低。
                2. 如果结构中还包含输入类的 DOM：
                    会产生错误 DOM 更新 ==> 界面有问题。

            4. 开发中如何选择key?:
                1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
                2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
                    使用index作为key是没有问题的。
    -->
<!-- 准备好一个容器-->
<div id="root">
    <!-- 遍历数组 -->
    <h2>人员列表（遍历数组）</h2>
    <button @click.once="add">添加一个老刘</button>
    <ul>
        <li v-for="(p,index) of persons" :key="index">
            {{p.name}}-{{p.age}}
            <input type="text">
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20}
            ]
        },
        methods: {
            add(){
                const p = {id:'004',name:'老刘',age:40};
                this.persons.unshift(p);
            }
        },
    })
</script>
</html>